<include file="Public/header" /> 
<script src="__PUBLIC__/js/draggabilly.pkgd.min.js"></script>
<script src="__PUBLIC__/js/validform.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/uploadify/jquery.uploadify.min.js"></script>
<style>
	form table th {
  min-width: 120px;
  text-align: right;
  vertical-align: top;
  padding: 16px 0 0 8px;
  height: 42px;
}

.marboxleft {
  position: relative;
  float: left;
  width: 415px;
  margin-left: 15px;
  padding-bottom: 20px;
  font-size: 14px;
}
.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 15px 12px 0;
  border-color: transparent #ccc transparent transparent;
  position: relative;
  left: -15px;
  top: 36px;
}
.marboxleft .postcontent {
  padding: 12px 1px;
  min-height: 28px;
  background: #f8f8f8;
  border-radius: 5px;
  border: 1px solid #d1d1d1;
}

.draggable {
  color:#fff;
  cursor:move;
}
.app-design{
	float:left;
	width:420px;
	height:740px;
	position: relative;
}
#svpic{
	width:100%;
	height:100%;
}
.avger{
	width: 100px;
  	height: 100px;
	position: absolute;
	left:10px;
	top:10px;
	border-radius: 50px;
}
.nickname{
	position: absolute;
	left:130px;
	top:27px;
	color:#FF5017;
	font-size:14px;
	font-weight: bold;
}
.code{
	background: #F90;
	position: absolute;
	width: 240px;
  	height: 240px;
	left:96px;
	top:386px;
}
.left{
	float:left;
}
form table td{
	padding: 10px 0 15px 0;
}
#mainCon table th{
	border:0px;
}
#mainCon table td{
	border:0px;
}
.mainCon table{
	border:0px;
}
</style>
<div class="container app">
	<include file="Public/sidebar" /> 
	<div id="mainCon" class="mainCon">
		<form action="" enctype="multipart/form-data" >
			<!--预览视图效果 -->
			<div class="app-design">
				<notempty name="result['picture']">
					<img src="<{$result['picture']}>"  style="width:100%;" id="svpic">
				<else/>
					<img src="__PUBLIC__/img/mycard.jpg"  style="width:100%;" id="svpic">
				</notempty>
				<div class="draggable avger">
					<img src="__PUBLIC__/img/avatar_4.jpg"  style="width:100%;height:100%;">
				</div>
				<div class="draggable nickname">用户昵称</div>
				<div class="draggable code">
					<img src="__PUBLIC__/img/code.jpg"  style="width:100%;height:100%;">
				</div>
			</div>
			
			<!--end -->
			<div class='marboxleft' >
				<div class="arrow"></div>
				<div class="postcontent">
				<input type="hidden" name="id" value="<{$result['id']}>">
				<input type="hidden" name="generalize_custom_id" value="<{$custom_info['id']}>">
				<table class='product' >
					<!--<tr>
						<th>排序：</th>
						<td>
							<input type="text" name="orderdisplay" class="form-control"  value="<{$result['orderdisplay']}>" style="width:185px;" />
							<span class="msgtips">越大越前，最大255</span>
						</td>
					</tr>-->
					<tr>
						<th>名片标题：</th>
						<td>
							<input type="text" name="title" class="form-control"  datatype="*" value="<{$result['title']}>" style="width:185px;" />
							<span class="msgtips"></span>
						</td>
					</tr>

					<tr>
						<th>昵称字体颜色：</th>
						<td>
							<div class="input-group">
								<input type="color" name="nickname_font_color" class="form-control left" value="" style="width:60px;" />
								<input type="text" name="nickname_font_color_text" vlaue="<{$custom_info['nickname_font_color']}>"  class="form-control left" style="width:150px;" >
								<span class="msgtips"></span>
							</div>
						</td>

					</tr>
					<tr>
						<th>昵称字体大小：</th>
						<td>
							<div class="input-group">
								<input type="number" name="nickname_font_size" class="form-control" value="<{$custom_info['nickname_font_size']}>" style="width:140px;" />
								<span class="input-group-addon">PX</span>
								<span class="msgtips"></span>
							</div>
						</td>

					</tr>
					<tr>
						<th>头像大小：</th>
						<td>
							<div class="input-group">
								<input type="number" name="avger_size" class="form-control" value="<{$custom_info['avger_size']}>" style="width:140px;" />
								<span class="input-group-addon">PX</span>
								<span class="msgtips"></span>	
							</div>
						</td>
					</tr>
					<tr>
						<th>二维码大小：</th>
						<td>
							<div class="input-group">
								<input type="number" name="code_size" class="form-control" value="<{$custom_info['code_size']}>" style="width:140px;" />
								<span class="input-group-addon">PX</span>
								<span class="msgtips"></span>
							</div>
						</td>

					</tr>
					<tr>
						<th>头像位置：</th>
						<td>
							<div class="input-group left">
								<input type="number" name="avger_pos_x" class="form-control" value="<{$custom_info['avger_pos_x']}>" style="width:100px;" />
								<span class="input-group-addon">X</span>
							</div>
							<div style="margin-left:20px;" class="input-group left">
								<input type="number" name="avger_pos_y" class="form-control" value="<{$custom_info['avger_pos_y']}>" style="width:100px;" />
								<span class="input-group-addon">Y</span>
							</div>
						</td>
					</tr>
					<tr>
						<th>昵称位置：</th>
						<td>
							<div class="input-group left">
								<input type="number" name="nickname_pos_x" class="form-control" value="<{$custom_info['nickname_pos_x']}>" style="width:100px;" />
								<span class="input-group-addon">X</span>
							</div>
							<div style="margin-left:20px;" class="input-group left">
								<input type="number" name="nickname_pos_y" class="form-control" value="<{$custom_info['nickname_pos_y']}>" style="width:100px;" />
								<span class="input-group-addon">Y</span>
							</div>
						</td>
					</tr>
					<tr>
						<th>二维码位置：</th>
						<td>
							<div class="input-group left">
								<input type="number" name="code_pos_x" class="form-control" value="<{$custom_info['code_pos_x']}>" style="width:100px;" />
								<span class="input-group-addon">X</span>
							</div>
							<div style="margin-left:20px;" class="input-group left">
								<input type="number" name="code_pos_y" class="form-control" value="<{$custom_info['code_pos_y']}>" style="width:100px;" />
								<span class="input-group-addon">Y</span>
							</div>
						</td>
					</tr>
					<tr>
						<th>上传图片：</th>
						<td>
							<div id="upload-file-view" class="OneImageBox upload-view">
								<div class="radio col-sm-5">
									<a class="btn btn-default" id="uploadify_two">上传图片</a> <span style="margin-top:10px;float:left;color:#999">（仅允许上传1MB以内的图片）</span>
								</div>
								<div id="showimg_two">
								<if condition="!empty($result['picture'])">
									<div style="width:100px;height:100px;border:1px solid #ccc;overflow:hidden;float:left;">
										<img src="<{$result['picture']}>" style="width:100px;height:100px;float:left;margin:0 auto;padding:5px;">
										<div onclick="removeImg_two();" style="height:30px;width:100%;background:#000;opacity:.6;text-align:center;z-index:3;position:relative;bottom:30px;color:#fff;line-height:30px;float:left;cursor:pointer;">删除</div>
									</div>
								</if>
								</div>
								<input type="hidden" id="picture" name="picture" value="<{$result['picture']}>"/>
							</div>
						
						</td>
					</tr>
				</table>
				</div>
				<!-- <label class="radio inline" style="margin-left: 10px;float: left;">是否发布：
					<input type="checkbox" name="status" value="1" <eq name="result['status']" value="1"> checked="checked"</eq>>发布
				</label>  -->
			</div>
			<div style='clear:both'></div>
			<div class="form-actions text-center">
				<button type="submit" class="btn btn-danger " name="submit" id="subbtn" value="保存">保存</button>
			</div>
		</form>
	</div>
</div>
<script>
	//提交表单
	$("form").Validform({
		tiptype:3,
		beforeSubmit:function(){
			var url = "<{:U('CardGeneralizeAction')}>";
            $.post(url,$("form").serializeArray(),function(data){
				if(data.status != 1){
					layer.open({
						content:data.info
					});
					return false;
				}else{
					window.location.href=data.url;
				}
			});
            return false;
		}
	});
	var custom_info = <{$custom_info_json}>;

	
	// 文件上传(首页中部)
	$("#uploadify_two").uploadify({
	//	'formData': {"uptype":"cate"},
		'swf'           : '/Public/js/uploadify/uploadify.swf',
		'uploader'      : "<?php echo U('Admin/Gallery/uploadImg');?>",
		'fileTypeExts'	: '*.jpg;*.png;*.gif',
		'width'			: 90,
		'buttonText' : '<a class="btn btn-default" id="uploadify_two">上传图片</a>',
		'hideButton' : true,
		'multi': false,
		'fileObjName' : 'imgFile',
		'fileSizeLimit' : '1MB',
		'onUploadError' : function(back) {
			
		},
		'onUploadStart' : function(file) {

    	},
		'onUploadSuccess' : function(file,data,response) {
			var r = jQuery.parseJSON(data);
			if(r.error == 0){
				//添加图片的样式
				var htm = '<div style="width:100px;height:100px;border:1px solid #ccc;overflow:hidden;float:left;">';
				htm += '<img src="/'+r.imgUrl+'" style="width:100px;height:100px;float:left;margin:0 auto;padding:5px;">';
				htm += '<div onclick="removeImg_two();" style="height:30px;width:100%;background:#000;opacity:.6;text-align:center;z-index:3;position:relative;bottom:30px;color:#fff;line-height:30px;float:left;cursor:pointer;">删除</div>';
				htm += '</div>';
				$('#showimg_two').html('');
				$("#showimg_two").append(htm);
				$("#picture").val("/"+r.imgUrl+"");
				$("#svpic").attr("src","/"+r.imgUrl+"");
			}
		},
	});
	
	function removeImg_two(){
		$("#showimg_two").html('');
		$("#picture").val('');
	}
</script>
<script src="__PUBLIC__/js/CardGeneralizeCustom.js"></script>